<template>
	<view style="display: flex;flex-direction: column; height: 1400rpx;background-color: #ececec;">
		<!-- 个人头像 -->
		<div v-for="(item,index) in xinxi" :key="index" style="width: 100%;">
			<div style="width: 100%;display: flex;flex-direction: row;background: #aaaaff;">
			     <div style="margin: auto;padding-left: 100rpx;">
			     {{item.wname}}
			     </div> 
				 <div style="display: flex;flex-direction: row;">
					 <div>
					     <img :src="item.ttp" style="width: 35rpx;height: 35rpx;margin-right: 20rpx;">
					 </div>
					 <div>
					     <img :src="item.ttpp" style="width: 35rpx;height: 35rpx;margin-right: 20rpx;">
					 </div>
				 </div>
			     
			</div>
		</div>
		<div style="display: flex;flex-direction: row; width: 100%;
		background-color: #aaaaff">
			<div style="display: flex;align-items: center;padding: 20rpx;
			justify-content: space-between;width: 100%;height: 230rpx;">
			<div>Hi,陈总好！</div>
			<div @click="hh()" style="display: flex;flex-direction: row-reverse;">
				<img src="/static/帅哥.jpg" style="width: 120rpx;
				height: 120rpx;border-radius: 60rpx;">
			</div>
			</div>
		</div>
		<div style="height: 120rpx;background-color: #aaaaff;width: 100%;position: absolute;top: 265rpx;">
			<!-- 紫色 -->
		</div>
		<!-- 余额 -->
		<div style="width: 100%;height: 140rpx;position: relative;display: flex;justify-content: center;">
			<!-- 相对定位 -->
			<div style="width: 100%;height: 50%; position: absolute;top: 0px;"></div>
			<!-- 绝对定位 -->
				<div style="display: flex;justify-content: space-around; align-items: center; 
				border: 1rpx ; width: 90%;height: 100%;
				background-color: #ffffff;border-radius: 20rpx;padding-left: 30rpx;">
				<!-- v-for遍历 -->
				<div v-for="(item,index) in mian" :key="index">
					<span style="padding: 1rpx;display: flex;justify-content: center;">
						{{item.tpdz}}
					</span>
				<span style="display: flex; justify-content: space-around;">
				{{item.mfname}}
				</span>
				</div>
				</div>
			</div>
			<!-- 今日推荐 -->
			<div @click="tj()" style="width: 100%;display: flex;justify-content: center;margin-top: 3%;background-color: #ececec;">
			<div style="display: flex;justify-content: space-around;align-items: center;
			border: 1rpx ;width: 90%;height: 150rpx;border-radius: 20rpx;padding: 15rpx;background-color: #ffffff;">
				<div v-for="(item,index) in man" :key="index">
					<span style="padding: 1rpx;display: flex;justify-content: center;">
					<img :src="item.tp" style="width: 60rpx;height: 60rpx;">
					</span>
				<span style="display: flex; justify-content: space-around;padding: 10rpx;">
				{{item.name}}
				</span>
				</div>
			</div>
			</div>
			<!-- 大礼包 -->
			<div style="display: flex;justify-content: center;margin-top: 2%;">
				<img src="/static/大礼包.png" style="width: 700rpx;height: 170rpx;">
			</div>
			<!-- 地址管理 -->
			<div style="width: 100%;background-color: #ececec;margin-top: 2%;">
				<div style="display: flex;justify-content: center;">
			<div style="display: flex;flex-direction: column; justify-content: space-around;align-items: center;
			border: 1rpx ;width: 90%;height: 240rpx;border-radius: 20rpx;padding: 15rpx;background-color: #ffffff;">
			<!-- 分散对齐 -->
			<div style="padding: 10rpx;width: 100%;">
				<div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #ffffff;margin-bottom: 25rpx;">
					<img src="/static/定位1.png" style="width: 25px;height: 20px;"></img>
				<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;padding-left: 2%;">
					<div>地址管理</div>
					<!-- <img src="/static/向下.png" style="width: 35rpx;height: 35rpx;"> -->
				</div>
				<img src="/static/下载.png" style="width: 32rpx;height: 25rpx;">
				</div>
				<div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #ffffff;">
					<img src="/static/折扣.png" style="width: 25px;height: 20px;"></img>
				<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;padding-left: 2%;">
					<div>我的减价</div>
					<!-- <img src="/static/向下.png" style="width: 35rpx;height: 35rpx;"> -->
				</div>
				<img src="/static/下载.png" style="width: 32rpx;height: 25rpx;">
				</div>
				<div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #ffffff;margin-top: 25rpx;">
					<img src="/static/客服.png" style="width: 25px;height: 20px;"></img>
				<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;padding-left: 2%;">
					<div @click="kefu">在线客服</div>
					<!-- <img src="/static/向下.png" style="width: 35rpx;height: 35rpx;"> -->
				</div>
				<img src="/static/下载.png" style="width: 32rpx;height: 25rpx;">
				</div>
				</div>
			</div>
			</div>
			</div>
			<!-- 关于 -->
			<div style="width: 100%;background-color: #ececec;;display: flex;justify-content: center;margin-top: 3%;">
			<div style="display: flex;flex-direction: column; justify-content: space-around;align-items: center;
			border: 1rpx ;width: 90%;height: 180rpx;border-radius: 20rpx;padding: 15rpx;background-color: #ffffff;">
			<!-- 分散对齐 -->
			<div style="padding: 10rpx;width: 100%;">
				<div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #ffffff;margin-bottom: 50rpx;">
					<img src="/static/星星.png" style="width: 25px;height: 20px;"></img>
				<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;padding-left: 2%;">
					<div>我的收藏</div>
					<!-- <img src="/static/向下.png" style="width: 35rpx;height: 35rpx;"> -->
				</div>
				<img src="/static/下载.png" style="width: 32rpx;height: 25rpx;">
				</div>
				<!-- <div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #ffffff;">
					<img src="/static/折扣.png" style="width: 25px;height: 20px;"></img>
				<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;padding-left: 2%;">
					<div>我的减价</div> -->
					<!-- <img src="/static/向下.png" style="width: 35rpx;height: 35rpx;"> -->
				<!-- </div>
				<img src="/static/下载.png" style="width: 35rpx;height: 30rpx;">
				</div> -->
				<div style="display: flex;flex-direction: row;padding: 6rpx;background-color: #ffffff;margin-top: 50rpx;">
					<img src="/static/感叹号.png" style="width: 25px;height: 20px;"></img>
				<div style="display: flex;flex-direction: row;width: 100%;height: 50rpx;padding-left: 2%;">
					<div>关于</div>
					<!-- <img src="/static/向下.png" style="width: 35rpx;height: 35rpx;"> -->
				</div>
				<img src="/static/下载.png" style="width: 32rpx;height: 25rpx;">
				</div>
				</div>
			</div>
			</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xinxi:[{
					id:1,
					wname:'',
					ttp:'/static/信息.png',
					ttpp:'/static/设置.png'
				},
				],
				mian:[{
					id:1,
					mfname:'余额',
					tpdz:'521'
				},
				{
					id:1,
					mfname:'优惠卷',
					tpdz:'520'
				},
				],
				man:[
					{id:1,name:'今日推荐',tp:'/static/订单.png'},
					{id:2,name:'待付款',tp:'/static/订单.png'},
					{id:3,name:'待收货',tp:'/static/订单.png'},
					{id:4,name:'待评价',tp:'/static/订单.png'}
					
				],
			}
		},
		methods: {
			hh(){
				uni.navigateTo({
					url:'/pages/log/log'
				})
			},
			tj(){
				uni.navigateTo({
					url:'/pages/cai/cai'
				})
			},
			kefu(){
				uni.navigateTo({
					url:'/pages/kefu/kefu'
				})
			}
		}
	}
</script>

<style>

</style>
